<template>
  <div>
    <newheader></newheader>
    <div>
      <el-tabs>
        <el-tab-pane label="处理预约单" name="newhouse">
            <h2 v-if="focusList.length === 0">暂无预约</h2>
            <el-row v-for="item in focusList" :key = "item.id">
                 <el-col style="width:80%;float:left"  @click.native="info(item.houseId,item.resourceType)" >
              <el-row style="height: 150px;padding-top:20px;cursor:pointer;border-bottom: 1px #DCDFE6 solid">
               <el-col :span="4" style="height: 100%;">
              <el-row style="height: 90%;">
                <el-image :src="item.pic" style="height: 100%;"></el-image>
              </el-row>
            </el-col>
               <el-col :span="16">
              <el-row>
                <h2>{{item.title}}</h2>
              </el-row>
              <el-row class="crow">
                <span>预约人：{{item.username}}</span>
              </el-row>
              <el-row class="crow">
                <span>预留电话：{{item.mobile}}</span>
              </el-row>
              <el-row style="float:right">
                <span>预约时间：{{item.orderDate | dateParse}}</span>
              </el-row>
            </el-col>

            
              </el-row>
                 </el-col>
                <el-col style="width:20%;float:right;">
            <el-button type="success" @click="changeStatus(item.id)"  v-if="item.status==1" style="margin: 10px;">顾客已看房</el-button>
            <el-button type="success" @click="removeOreder(item.id)"   style="margin: 10px;">删除预约</el-button>
               </el-col>
            </el-row>
        <el-pagination
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> 
       </el-tab-pane>


       
        <el-tab-pane label="在线解答" name="answer">


                    <div class="wxchatBorderLeft">

                      <el-row>

                        <div style="padding: 10px;">

                          <div style="display: inline-block;">
                              

                           <h5 style="text-align:right">
                               &nbsp;&nbsp; {{data}}
                            </h5>

                          </div>

                          <!-- <div style="display: inline-block;">&nbsp;&nbsp;

                            <i class="el-icon-plus"></i>

                          </div> -->

                        </div>

                      </el-row>

                      <el-row>

                        <div>

                          <el-col :span="24">

                            <div style="display: inline-block;padding: 12px;">

                              <!-- <el-avatar shape="square"></el-avatar> -->

                            </div>

                            <div style="display: inline-block;">
                            

                            <el-row v-for="item in userList" :key="item.id" style="border-bottom: 1px #000000 solid;width:250px;padding-left:20px">
                              <el-col @click.native="sendMessage(item.id)">

                                <div class="wxchatPeople">{{item.username}}</div>

                              </el-col>

                              <el-col>

                                <div class="wxchatNews">{{item.newmsg}}</div>

                              </el-col>
                            </el-row>

                            </div>

                          </el-col>

                        </div>

                      </el-row>

                    </div>

                     
                    <div class="wxchatBorderRightTop">

                      <div style="float: right;padding: 5px;">

                        <i class="el-icon-close" style="font-size: 10px;"></i>

                      </div>

                      <div class="wxchatName">{{this.chatingName}}</div>

                      <div class="wxchatMore">

                        <i class="el-icon-more"></i>

                      </div>

                    </div>

                    <div class="wxchatBorderRightMid">
                    <!-- 页面显示框 -->
                      
                      <div v-html="content"></div>
                    </div>

                    <div class="wxchatBorderRightBottom">

                      <div>

                        <div class="wxchatIcon1">

                          <i class="el-icon-star-off"></i>

                        </div>

                        <div class="wxchatIcon2">

                          <i class="el-icon-folder-remove"></i>

                        </div>

                        <div class="wxchatIcon3">

                          <i class="el-icon-scissors"></i>

                        </div>

                        <div class="wxchatIcon4">

                          <i class="el-icon-chat-dot-round"></i>

                        </div>

                      </div>

                      <div style="margin: -2px 15px;">

                        <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="" 

                          resize="none" autofocus maxlength="500"
                          v-model="messagePojo.msg">

                        </el-input>

                      </div>

                      <div class="sendButton">

                        <el-button size="mini" @click="send">发送</el-button>

                      </div>

                    </div>
                     






        </el-tab-pane>
        
      </el-tabs>
    </div>
  
  </div>
  
</template>

<script>
  import newheader from '@/components/newheader';
  import cfooter from "@/components/cfooter";
  import { mapGetters } from 'vuex';
  import userApi from '@/api/agent';
  import newHouseApi from "@/api/newhouse";
  import informationApi from "@/api/information";
  export default {
    name: "info",

    computed: {
        ...mapGetters([
            'name',
            'uid'
        ])

    },
    data() {
            return {
                focusList:[],
                total: 0, // 总记录数
                currentPage: 1, // 当前页
                pageSize: 10, // 每页大小
                pojo:{},
                centerDialogVisible: false,
                messageAgent:[],
                userList:[],
                messagePojo:{
                    toId:'',
                    msg:''
                },
                websocket: null,
                 data:'',
                content:'',
                chatingName:'',
                chatingId:'',
            }
        },
    components: {
      newheader: newheader,
      cfooter: cfooter
    },
    created(){
          this.fetchData()
        },
        mounted() {
            // console.log(this.$route.params.id)
            // this.ready()
            // this.postionMap.lng=this.pojo.lng;
            // this.postionMap.lat=this.pojo.lat;
            // this.ready2()
            if ('WebSocket' in window) {
                console.log("连接websocket")
                this.websocket = new WebSocket('ws://127.0.0.1:18081/ws/'+this.uid)
                this.initWebSocket()
            } else {
                alert('当前浏览器 Not support websocket')
            }
            
        },
     methods: {
        fetchData(){
               userApi. getFocus(this.currentPage, this.pageSize,this.uid).then(response=>{
                 response.list.forEach(order => {
                  //  console.log(order)
                  this.focusList.push(order)
                 });
                //  console.log(this.focusList);
                this.total= response.pagination.total;

               })
            },
             info(id,resourceType) {
                if(resourceType==1){

                  this.$router.push({path:'/newHouse/info/'+id})
                }
                else if(resourceType==2){

                  this.$router.push({path:'/oldHouse/info/'+id})
                }else{

                  this.$router.push({path:'/rentHouse/info/'+id})
                }
                // console.log(id,resourceType)
                // this.$router.push({path:'/newHouse/info/'+id})
            },

            sendMessage(id) {
                console.log("设置消息进来了")
                if (this.uid) {
                    informationApi.findById(this.uid,id).then(response => {
                        console.log("xiaoxi");
                        console.log(response)
                        this.messageAgent = response;
                        this.messageAgent.forEach(mifo => {
                          // console.log(mifo.from.id);
                          // console.log(mifo.msg)
                          //获取消息
                          if(mifo.from.id==id){
                            this.content+="<el-row>\n" +
                    "            <span style=\"padding: 10px\">"+mifo.from.username+"</span><br>\n" +
                    "            <span style=\"line-height: 30px;display: block;background: #fff;width: 45%;border-radius: 5px;margin: 10px;padding:5px\">"+mifo.msg+"</span>\n" +
                    "          </el-row>"
                          }else{
                             this.content+="<div style='width: 100%;height: auto'><div style=\"text-align: right;line-height: 10px;margin: 10px\">\n" +
                    "            <div style=\"padding: 10px;\">"+this.name+"【爱佳经纪人】</div>\n" +
                    "            <div style=\"line-height: 30px;background: #fff;margin-left:55%;width: 45%;border-radius: 5px;padding:5px\">"+mifo.msg+"</div>\n" +
                    "          </div></div>"

                          }
                        
                        
                        });
                    })
                    this.content = ''
                    // this.centerDialogVisible = true
               
                    
                    this.chatingId=id;
                } else {
                    this.$router.push({path: '/login'})
                }
            
                
                
            },
            

             setOnmessageMessage(event) {
                //this.data = '服务端返回：' + event.data;
                var temp = JSON.parse(event.data)
                console.log(temp);
                if(this.userList.length!=0){
                    this.userList.forEach(user => {
                        if(user.id!=temp.from.id){

                            this.userList.push({id:temp.from.id,username:temp.from.username,newmsg:temp.msg});
                        }else{

                            user.newmsg=temp.msg;
                        }
                    });
                }else{

                    this.userList.push({id:temp.from.id,username:temp.from.username,newmsg:temp.msg});
                }
                console.log(this.userList);
                if(this.content!=''){
                 this.content+="<el-row>\n" +
                    "            <span style=\"padding: 10px\">"+temp.from.username+"</span><br>\n" +
                    "            <span style=\"line-height: 30px;display: block;background: #fff;width: 45%;border-radius: 5px;margin: 10px;padding:5px\">"+temp.msg+"</span>\n" +
                    "          </el-row>"

                }
                
            },
             //websocket发送消息
            send() {
                this.messagePojo.toId = this.chatingId
                this.websocket.send(JSON.stringify(this.messagePojo))
                this.content+="<div style='width: 100%;height: auto'><div style=\"text-align: right;line-height: 10px;margin: 10px\">\n" +
                    "            <div style=\"padding: 10px;\">"+this.name+"</div>\n" +
                    "            <div style=\"line-height: 30px;background: #fff;margin-left:55%;width: 45%;border-radius: 5px;padding:5px\">"+this.messagePojo.msg+"</div>\n" +
                    "          </div></div>"
                this.messagePojo.msg = ''

            },

             initWebSocket() {
                //连接错误
                this.websocket.onerror = this.setErrorMessage

                // //连接成功
                this.websocket.onopen = this.setOnopenMessage

                //收到消息的回调
                this.websocket.onmessage = this.setOnmessageMessage

                //连接关闭的回调
                this.websocket.onclose = this.setOncloseMessage

                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = this.onbeforeunload
            },
            setErrorMessage() {
                this.data = "WebSocket连接发生错误" + '   状态码：' + this.websocket.readyState;
            },
            setOnopenMessage() {
                this.data = "WebSocket连接成功" + '   状态码：' + this.websocket.readyState;
            },
             info(id,resourceType) {
                if(resourceType==1){

                  this.$router.push({path:'/newHouse/info/'+id})
                }
                else if(resourceType==2){

                  this.$router.push({path:'/oldHouse/info/'+id})
                }else{

                  this.$router.push({path:'/rentHouse/info/'+id})
                }
                // console.log(id,resourceType)
                // this.$router.push({path:'/newHouse/info/'+id})
            },
            changeStatus(id){
                
                let order={id:id,status:2}
                userApi. updateOrder(order).then(response=>{

                })
                
                this.focusList.forEach(item => {
                    
                    if(item.id==id){
                        item.status=2
                    }
                });
                
                },

                removeOreder(id){

                let order={id:id}
                 userApi. removeOrder(order).then(response=>{

                })
                for(let i=0;i<this.focusList.length;i++){

                    if(this.focusList[i].id==id){
                        this.focusList.splice(i,1);
                    }
                }
                },
      }



  }


  </script>

  <style scoped>

   .el-dialog__header {
        padding: 20px 20px 10px;

      }

    

     .chatPop1 :hover {
        background-color: #FAFAFA;

      }

    

      .chatPop1 span {
        background-color: #fff;

        padding: 5px 8px;

        display: inline-block;

        border-radius: 10px;

        margin: 0px 0 10px 10px;

        position: relative;

        border: 1px solid #E3E3E3;

        max-width: 290px;

      }

    

      .chatPop1 span::after {
        content: '';

        border: 8px solid #ffffff00;

        border-right: 8px solid #fff;

        position: absolute;

        top: 8px;

        left: -16px;

      }

    

      .chatPop2 :hover {
        background-color: #2683f5;

      }

    

      .chatPop2 span {
        background-color: #2683f5;

        padding: 5px 8px;

        display: block;

        border-radius: 10px;

        margin: 0px 15px 10px 10px;

        position: relative;

        border: 1px solid #E3E3E3;

        max-width: 290px;

        float: right;

        color: #fff;

      }

    

      .chatPop2 span::after {
        content: '';

        border: 8px solid #ffffff00;

        border-right: 8px solid #2683f5;

        position: absolute;

        top: 8px;

        right: -16px;

        transform: rotateY(180deg)

      }

    

      .custom {
        border: 0px solid blue;

        height: 670px;

        width: 795px;

      }

    

      .wxchatBorder {
        width: 795px;

        height: 670px;

        border: 1px solid red;

        margin-left: -20px;

        margin-top: -59.5px;

    

      }

    

      .wxchatBorderLeft {
        width: 260px;

        height: 670px;

        background-color: #eeebe9;

        border: 1px solid gray;

        display: block;

        float: left;

        margin-left: -20px;
        margin-right: 0;

        margin-top: 7px;

      }

    

      .wxchatPeople {
        color: #000000;

        font-size: 20px;

      }

    

      .wxchatNews {
        color: #999;

        padding-top: 5px;

        font-size: 12px;

      }

    

      .wxchatName {
        color: #000000;

        font-size: 20px;

        float: left;

        padding-left: 30px;

        padding-top: 20px;

      }

    

      .wxchatMore {
        color: #999;

        font-size: 20px;

        float: right;

        margin-right: -15px;

        padding-top: 25px;

      }

    

      .wxchatBorderRight {
        max-width: 245px;

        height: 670px;

        background-color: #000;

        border: 2px solid red;

        display: block;

        float: right;

        /* margin-right: -22px; */

        margin-left: 0px;

        margin-top: 0px;

      }

    

      .wxchatBorderRightTop {
        width: 84%;

        height: 60px;

        background-color: #f5f5f5;

        border-bottom: 1px solid #e7e7e7;

        display: block;

        float: right;

        margin-left:0;

        margin-top:4px;

      }

    

      .wxchatBorderRightMid {
         width: 84%;


        height: 428px;

        background-color: #f5f5f5;
/* 
        border: 2px solid deeppink; */

        display: block;

        float: right;

        margin-left:0;
        overflow: hidden;
        overflow-x:auto;
        overflow-y:auto;

      }

    

      .wxchatBorderRightBottom {
        width: 84%;

        height: 152px;

        background-color: #fff;

        /* border: 1px solid #eee; */

        display: block;

        float: right;

         margin-left:0;

      }

    

      .wxchatIcon1 {
        display: inline-block;

        padding: 8px 10px 10px 30px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .wxchatIcon2 {
        display: inline-block;

        padding: 8px 10px 10px 20px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .wxchatIcon3 {
        display: inline-block;

        padding: 8px 10px 10px 10px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .wxchatIcon4 {
        display: inline-block;

        padding: 8px 10px 10px 0px;

        width: 40px;

        height: 40px;

        font-size: 20px;

      }

    

      .sendButton {
        float: right;

        margin-top: 5px;

        margin-right: 28px;

      }


</style>